<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="head&kk.css">
	<style>
		.content{
			background-image: url(img/21.png);
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;    
		    height:491px;  
		    z-index: 1;
		}

		.big img{
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;   
			width: 311px;
			height: 219px;
			position: absolute;
			z-index: 2;
			padding-top: 140px;
		}
		.hello img{
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;  
		    position: absolute;
		    z-index: 3;
		    padding-top: 150px;
		    padding-left: 25px;
		    width: 190px;
			height: 48px;
		}
		.small img{
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;  
		    position: absolute;
		    z-index: 4;
		    padding-left: 15px;
    		padding-top: 260px;
		    width: 156px;
			height: 34px;
		}
		.borders img{
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale');    
		    -moz-background-size:100% 100%;    
		        background-size:100% 100%;  
		    position: absolute;
		    z-index: 5;
		    padding-left: 10px;
    		padding-top: 125px;
		    
		}
	</style>
</head>
<body>
	<div class="page">
	<svg xmlns="http://www.w3.org/2000/svg" width="322" height="48" viewBox="0 0 322 48" style="margin-bottom: -4px;"><path fill="#F6F9FA" d="M0 48v-4.052C0 23.389 16.911 8.571 37.225 6.723c0 0 61.917-3.723 123.819-3.723 61.872 0 123.73 3.723 123.73 3.723C305.329 8.571 322 23.389 322 43.948V48"/></svg>
		<!-- 头部 -->
		<div class="header">
			<h1 class="head_name">邀请函</h1>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 音频图标 -->
			<div class="icon">
				<span class="glyphicon glyphicon-music" aria-hidden="true"></span>
			</div>
			<div class="auds">
			<!-- 音频文件 -->
				<audio src="i/1.mp3" controls="controls" autoplay="autoplay" id="audio" >
				</audio>
			</div>
			<!-- 背景图 -->
			<div id="family">
				
				<div class="big"  style="display: none;">
					<img src="img/22.png" alt="">
				</div>
				<div class="hello" style="display: none;">
					<img src="img/23.png" alt="">
				</div>
				<div class="small"  style="display: none;">
					<img src="img/24.png" alt="">
				</div>
				<div class="borders"  style="display: none;">
					<img src="img/25.png" alt="">
				</div>
			</div>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" width="322" height="45" viewBox="0 0 322 45"><path fill="#F6F9FA" d="M322 0v4.052c0 20.559-16.671 35.377-37.225 37.225 0 0-61.857 3.723-123.73 3.723-61.902 0-123.819-3.723-123.819-3.723C16.911 39.429 0 24.611 0 4.052V0"/></svg>
	</div>


	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".hello").fadeIn(1000);
			$(".big").fadeIn(3000);
			$(".small").fadeIn(4000);
			$(".borders").fadeIn(6000);
			$(".icon").click(function(){
				var audioEle=$("#audio")[0];
				audioEle.play();
				audioEle.pause();
			})
	
		})
	</script>
</body>
</html>